<!-- eslint-disable camelcase -->
<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: wiz
 * @Date: 2023-07-04 07:26:56
 * @LastEditors: swc
 * @LastEditTime: 2024-06-04 15:52:25
-->

<template>
  <div class="init-container">
    <Split v-model="roleRatio" mode="horizontal" min="200px" max="500px">
      <div slot="left" class="full-width-height role">
        <o-base-grid
          ref="gridRole"
          :config="gridRoleConf"
          :regCustEventName="custPmsFunEventName"
        />
      </div>
      <div slot="right" class="full-width-height">
        <Split v-model="funRatio" mode="horizontal" min="200px" max="500px">
          <div slot="left" class="full-width-height fun">
            <o-simple-toolbar
              :list="funToolbarList"
              align="center"
              :size="18"
              @click="funBtnClick"
            />

            <Collapse accordion v-model="openFunList">
              <Panel
                v-for="(itm, idx) in roleFunList"
                :name="itm.groupID"
                :key="idx"
              >
                <span> {{ $srv.getI18nBySrv(itm.groupTitle) }}</span>
                <div slot="content">
                  <!-- 全选单选多选 -->
                  <div class="toolbar">
                    <div class="toolbar-search">
                      <Input
                        :placeholder="$srv.getI18nByValue('搜索内容回车确认')"
                        @on-enter="onFunSearch(itm.groupID, $event)"
                      />
                    </div>
                    <RadioGroup
                      v-model="itm.selStatus"
                      @on-change="roleFunRadioClick(itm.groupID, $event)"
                    >
                      <Radio label="closeSel">
                        <span>{{ $srv.getI18nByValue('关闭选择') }}</span>
                      </Radio>
                      <Radio label="multipleChoice">
                        <span>{{ $srv.getI18nByValue('多选') }}</span>
                      </Radio>
                      <Radio label="selectAll">
                        <span>{{ $srv.getI18nByValue('全选') }}</span>
                      </Radio>
                      <Radio label="notAll">
                        <span>{{ $srv.getI18nByValue('全不选') }}</span>
                      </Radio>
                    </RadioGroup>
                    <Icon
                      class="toolbar-item"
                      :title="$srv.getI18nByValue('从角色复制')"
                      type="ios-copy"
                      size="18"
                      @click="funCpFromRoleByFunGroup(itm, $event)"
                    ></Icon>
                    <Icon
                      class="toolbar-item"
                      :title="$srv.getI18nByValue('新加功能')"
                      type="md-add-circle"
                      size="18"
                      @click="funAddByFunGroup(itm, $event)"
                    ></Icon>
                  </div>
                  <div class="funs">
                    <div
                      v-for="(item, idx) in itm.funs"
                      :key="idx"
                      class="fun-item"
                      :class="{
                        funCellClick: item.cellClick,
                        hintTitle: item.hintTitle,
                        gBackground: item.background
                      }"
                      @click="roleFunItemClick(itm.groupID, item.id, item)"
                    >
                      <span :class="{ delText: item.deleted }">
                        <Checkbox
                          v-model="item.chkVal"
                          :disabled="
                            !item.deleted ? item.chkBoxDisabled : item.deleted
                          "
                          :label="item[$srv.globalVar.fieldName.m2oFunTitle]"
                          @on-change="onFunSelect"
                        >
                        </Checkbox>
                        <span
                          :title="
                            $srv.getI18nBySrv(
                              item[$srv.globalVar.fieldName.m2oFunTitle]
                            )
                          "
                        >
                          {{
                            $srv.getI18nBySrv(
                              item[$srv.globalVar.fieldName.m2oFunTitle]
                            )
                          }}</span
                        >
                      </span>
                    </div>
                  </div>
                </div>
              </Panel>
            </Collapse>
          </div>
          <div slot="right" class="full-width-height">
            <Split v-model="actRatio" mode="vertical">
              <div slot="top" class="full-width-height top">
                <div class="head">
                  <o-simple-toolbar
                    :list="actToolbarList"
                    align="center"
                    :size="18"
                    @click="actionBtnClick"
                  />
                </div>
                <div class="detail">
                  <Collapse v-model="openActList" simple>
                    <Panel name="base">
                      {{ $srv.getI18nByValue('基本权限') }}
                      <div slot="content" class="base">
                        <div
                          class="item"
                          v-for="(itm, idx) in baseList"
                          :key="idx"
                        >
                          <cSwitch
                            v-model="itm.val"
                            :title="$srv.getI18nBySrv(itm.title)"
                            align="right"
                            :disabled="itm.disabled"
                            @on-change="baseListchange(itm.name, $event)"
                          />
                        </div>
                      </div>
                    </Panel>
                    <Panel name="toolbar">
                      {{ $srv.getI18nByValue('工具档按扭权限') }}
                      <div slot="content" class="toolbar">
                        <div
                          class="item"
                          v-for="(itm, idx) in otherList"
                          :key="idx"
                        >
                          <cSwitch
                            :title="$srv.getI18nBySrv(itm.title)"
                            :disabled="itm.disabled"
                            v-model="itm.val"
                            align="right"
                            @on-change="otherListchange(itm.name, $event)"
                          />
                        </div>
                      </div>
                    </Panel>
                    <Panel name="field">
                      {{ $srv.getI18nByValue('字段显示权限') }}

                      <div slot="content" class="field">
                        <div
                          class="item"
                          v-for="(itm, idx) in fieldList"
                          :key="idx"
                        >
                          <cSwitch
                            :title="$srv.getI18nBySrv(itm.title)"
                            :disabled="itm.disabled"
                            v-model="itm.val"
                            align="right"
                            @on-change="fieldListchange(itm.name, $event)"
                          />
                        </div>
                      </div>
                    </Panel>
                  </Collapse>
                </div>
              </div>
              <div slot="bottom" class="full-width-height bottom">
                <o-base-grid
                  ref="gridRule"
                  :config="gridRoleFunRuleConf"
                  :regCustEventName="custPmsRuleEventName"
                />
              </div>
            </Split>
          </div>
        </Split>
      </div>
    </Split>
    <o-dialog-box
      v-model="dialogIsShow"
      :title="$srv.getLangPathByValue(dialogTitle)"
      :okText="$srv.getLangPathByValue(dialogOkText)"
      :cancelText="$srv.getLangPathByValue(dialogCancelText)"
      @on-ok="onDialogOK"
    >
      <div slot="content">
        <Tree
          :data="addFunData"
          :empty-text="$srv.getI18nByValue('无数据')"
          show-checkbox
          @on-check-change="addFunChkChange"
        >
        </Tree>
      </div>
    </o-dialog-box>
  </div>
</template>

<script lang="ts">
import { N_oTree, N_oBaseGrid } from '@/types';
import {
  Tsrv,
  T_srv,
  ifs,
  ts,
  vue,
  I_cmd,
  Tcmd,
  actToolbarConf,
  funToolbarConf,
  getRoleConf,
  getRoleFunRuleConf,
  N_oSimpleToolbar,
  N_cpms
} from './config';

@T_srv.comp
export default class cPms extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 组件名 */
  private G_compName: string = 'cPms';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = Tcmd;

  public roleRatio: number = 0.28;

  public funRatio: number = 0.45;

  public actRatio: number = 0.6;

  public actToolbarList = actToolbarConf();

  public funToolbarList = funToolbarConf();

  // 折叠开启
  public openActList: Array<string> = ['toolbar', 'field', 'base'];

  public openFunList: Array<string> = [];

  public gridRoleConf: any = getRoleConf();

  public gridRoleFunRuleConf: any = getRoleFunRuleConf();

  // 外观权限基础
  public baseList = [];

  // 外观权限字段
  public fieldList = [];

  // 外观权限其它
  public otherList = [];

  // 增加功能数据
  public addFunData = [];

  public dialogTitle = '增加功能';

  public dialogOkText = '确定';

  public dialogCancelText = '取消';

  public dialogIsShow: boolean = false;

  public selectFuns: Array<any> = [];

  // baseGrid 权限规则刷新总线事件名
  private ruleRefreshEvent: string = Tsrv.utils.custUUID(8);

  public custPmsRuleEventName: Array<N_oBaseGrid.I_regCustEventName> = [
    {
      receive: {
        // source: Tsrv.globalVar.funName.PMS_RULE,
        source: '1F444551417D30D0',
        target: this.ruleRefreshEvent
      }
    }
  ];

  // baseGrid 权限功能刷新总线事件名
  private funRefreshEvent: string = Tsrv.utils.custUUID(8);

  public custPmsFunEventName: Array<N_oBaseGrid.I_regCustEventName> = [
    {
      send: {
        source: Tsrv.globalVar.funName.PMS_FUN,
        target: this.funRefreshEvent
      }
    }
  ];

  // 角色功能
  public roleFunList: Array<N_cpms.I_roleFunItem> = [];

  public roleFunTreeConf: N_oTree.I_conf = {
    data: [{ checked: false, id: 1, parentId: null, title: 'aaa' }],
    keyName: 'id',
    parentKeyName: 'parentId',
    nodeIcon: 'ios-folder-outline',
    leafIcon: 'ios-add-circle-outline'
  };

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    const that = this;

    this.$bus.$on(this.funRefreshEvent, (msg: any) => {
      if (
        /^(search|default)$/.test(msg.type) &&
        msg.option.autoCompleteInfo.table === Tsrv.globalVar.tableName.PMS_ROLE
      ) {
        that.GT_command.accSetID =
          msg.option.autoCompleteInfo.data[
            Tsrv.globalVar.fieldName.accountSetID
          ];
        that.GT_command.currRoleID = msg.option.autoCompleteInfo.key;
        that.GT_command.loadFunData(that.GT_command.currRoleID);
      }
    });
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    this.$bus.$off(this.funRefreshEvent);
  }

  /**
   * @description: 基础权限变动
   * @param {boolean} e
   * @return {*}
   * @author: wiz
   * @Date: 2023-07-06 11:10:46
   * @LastEditors: wiz
   * @LastEditTime: Do not edit
   */
  public baseListchange(name: string, e: boolean) {
    if (name === 'browse') {
      this.GT_command.browseSwitchVal = e;
    }
    this.GT_command.actChange('base');
  }

  public fieldListchange(name: string, e: boolean) {
    this.GT_command.actChange('field');
  }

  public otherListchange(name: string, e: boolean) {
    this.GT_command.actChange('other');
  }

  public actionBtnClick(cf: N_oSimpleToolbar.I_Conf, e: any) {
    switch (cf.key) {
      case 'selectAll':
        this.GT_command.browseSwitchVal = true;
        this.GT_command.setActs(true, false);
        this.GT_command.actChange('auto');
        break;
      case 'unSelectAll':
        this.GT_command.browseSwitchVal = false;
        this.GT_command.actChange('auto');
        break;
      case 'cpFromRole':
        this.GT_command.actCpFromRole(cf, e);
        break;
      case 'refresh':
        this.GT_command.loadActionData(this.GT_command.currRoleFunsID);
        break;
      case 'save':
        this.GT_command.doActSave();
        break;
      default:
        throw new Error(`不能识别的类型${cf.key}`);
    }
  }

  public funBtnClick(cf: N_oSimpleToolbar.I_Conf, e: any) {
    switch (cf.key) {
      case 'add':
        this.dialogIsShow = true;
        this.GT_command.addFun();
        break;
      case 'delete':
        this.GT_command.deleteFun();
        break;
      case 'cpFromRole':
        this.GT_command.funCpFromRole(cf, e);
        break;
      case 'refresh':
        this.GT_command.loadFunData(this.GT_command.currRoleID);
        break;
      case 'save':
        this.GT_command.doFunsSave();
        break;
      case 'reset':
        this.GT_command.setAllFuns().then(b => {
          if (b) {
            this.GT_command.loadFunData(this.GT_command.currRoleID);
          }
        });
        break;
      case 'refreshCache':
        this.GT_command.refreshCache();
        break;
      default:
        throw new Error(`不能识别的类型${cf.key}`);
    }
  }

  public roleFunRadioClick(groupID: string, label: string) {
    this.GT_command.roleFunRadioClick(groupID, label);
  }

  public roleFunItemClick(groupID: string, roleFunID: string, item: any) {
    const funID = item[Tsrv.globalVar.fieldName.funID];
    if (this.GT_command.currFunID === funID) {
      return;
    }
    this.GT_command.currFunID = funID;
    this.GT_command.currRoleFunsID = item.id;
    this.GT_command.roleFunItemClick(groupID, roleFunID);

    this.loadRoleRule(this.GT_command.getRuleEventMsg(roleFunID, item));
  }

  public loadRoleRule(msg) {
    // 更新rule
    this.$bus.$emit(this.ruleRefreshEvent, msg);
  }

  public onFunSelect(p: boolean) {
    this.GT_command.selectChange(p);
  }

  public funCpFromRoleByFunGroup(item: N_cpms.I_roleFunItem, e: any) {
    this.GT_command.funCpFromRoleByFunGroup(item, e);
  }

  public funAddByFunGroup(item: N_cpms.I_roleFunItem, e: any) {
    this.dialogIsShow = true;
    this.GT_command.funAddByFunGroup(item, e);
  }

  public addFunChkChange(e: Array<any>) {
    this.selectFuns = e.filter(el => Tsrv.utils.noValue(el?.children));
  }

  public onDialogOK(e) {
    this.GT_command.addSelectFun();
  }

  public onFunSearch(groupID: string, e: any) {
    this.GT_command.hintTitle(groupID, e.target.value);
  }
}
</script>
<style lang="scss" scoped>
// .role {
// }
.fun {
  background: #fff;
  overflow-y: auto;
  .toolbar {
    padding: 6px;
    display: flex;
    // justify-content: center;
    align-items: center;
    border: 1px solid #e9e9e9;
    box-shadow: 0px 8px 12px 0px rgba(0, 52, 107, 0.04);
    .toolbar-item {
      margin-left: 6px;
    }
    .toolbar-search {
      margin-right: 6px;
    }
  }
  .funs {
    margin-top: 6px;
    padding: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
  }
  .fun-item {
    border: 1px solid #f2f3f6;
    padding-left: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    // font-size: 16px;
    align-items: center;
    height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .delText {
      text-decoration: line-through;
    }
  }
  .funCellClick {
    border: 1px solid #f30;
  }
  .hintTitle {
    color: rgb(255, 157, 0);
  }
  .gBackground {
    background: #f7f7f7;
  }
}
.top {
  background: #fff;
  display: flex;
  flex-direction: column;
  .head {
    display: flex;
  }
  .detail {
    flex-grow: 1;
    overflow: auto;
    .base,
    .field,
    .toolbar {
      padding: 6px;
      display: flex;
      flex-wrap: wrap;
      .item {
        // title不太于6个汉字
        width: 175px;
        padding-top: 6px;
        padding-bottom: 6px;
        flex-grow: 0;
      }
      .fun-item {
        width: 100px;
      }
    }
  }
}

::v-deep .ivu-modal-body {
  max-height: 500px;
  overflow-y: scroll;
}
::v-deep .title {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// .bottom {
// }
</style>
